<template>
    <div>
      <h2>用户信息</h2>
      <hr>
      <table border="2">
        <tr>
          <td>编号</td>
          <td>用户名</td>
          <td>密码</td>
          <td>电话号</td>
          <td>注册时间</td>
          <td>工资</td>
          <td>性别</td>
        </tr>
        <tr v-for="user in findLis">
          <td>{{user.id}}</td>
          <td>{{user.username}}</td>
          <td>{{user.password}}</td>
          <td>{{user.phone}}</td>
          <td>{{user.createTime}}</td>
          <td>{{user.money}}</td>
          <td>{{user.sex}}</td>
        </tr>
      </table>
        <br>
      <button @click="getInfo">get请求参数第一种拼接</button>
      <button @click="getInfo2">get请求参数第二种Restful风格参数</button>
      <button @click="getInfo3">get请求参数第三种params传递参数</button>
      <button @click="getInfo4">post请求参数第四种params传递参数</button>
      <button @click="getInfo5">post请求参数第五种后端使用@RequestBody注解传递参数</button>

    </div>

</template>

<script>
import axios from "axios";
export default {
  name: "UserView",
  data() {
    return {
      findLis:[],
      id:15,
    }

  },
  methods: {
    getInfo(){
      axios.get("/findOne?id=15").then((res)=>{
        console.log(res.data)
        // this.findLis=res.data.data
      })
          .catch((error)=>{
            console.log(error)
          })
    },
    getInfo2(){
      axios.get("/findOne?id="+this.id).then((res)=>{
        console.log(res.data)
        // this.findLis=res.data.data
      })
          .catch((error)=>{
            console.log(error)
          })
    },
    getInfo3(){
      axios.get("/findOne",{
        params:{
          id:15
        }
      }).then((res)=>{
        console.log(res.data)
        // this.findLis=res.data.data
      })
          .catch((error)=>{
            console.log(error)
          })
    },
    getInfo4(){
      axios.post("/addUser",{
          username:"小小",
          password:"555580",
          phone:"78545454",
          createTime:"2024-1-1",
          money:88.2,
          sex:1,
      }, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded' // 指定为表单类型的数据
            }
          }
      ).then((res)=>{
        console.log(res.data)
      })
          .catch((error)=>{
            console.log(error)
          })
    },
    getInfo5(){
      axios.post("/addUser",{
            username:"晴天",
            password:"5374523",
            phone:"89227",
            createTime:"2024-02-01",
            money:89.2,
            sex:2,
          }).then((res)=>{
        console.log(res.data)
      })
          .catch((error)=>{
            console.log(error)
          })
    },
  },
  created() {
      axios.get("http://localhost:8888/findAll").then((res)=>{
        console.log(res)
        this.findLis=res.data
      })
          .catch((error)=>{
            console.log(error)
          })
    }

}
</script>

<style scoped>

</style>